<template>
	<div class="details" :class="{protect:isprotect,night:isnight,middle:ismiddle,large:islarge}" >
		<div  class="easay" >
			<h1>{{article.title|filterArcTitle}}
				 <div class="tend">
		        	<TendLabel :tend="parseInt(article.positiveOrNegative)"></TendLabel>
		   		 </div>
		   		 <el-button class="back" @click="goback()">返回</el-button>
			</h1>
			<div class="from">
				<div class="gather">
					<span>采集自:</span>{{article.webSite}}
				</div>
				<div class="appear">
					<span>发表人:</span>{{article.author}}
				</div>
				<div class="appear-time">
					<span>发表时间:</span>{{article.poTime|formatTime}}
				</div>
				<div class="gauging-time">
					<span>监测时间:</span>{{article.addTime|formatTime}}
				</div>
			</div>
			<div class=" originalText">
				<div class="gauging-time">
					<span>原文链接:</span><input  class="url" ref="url" :value="article.url" readonly @click='openUrl(article.url)' ></input>
					<el-button @click="copy(article.url)" class="copy" :data-clipboard-text="article.url">复制原文链接</el-button>
				</div>
			</div>
			<div class="linedesign">
				<span>涉及关键词:</span>
				<span v-for="i in key" :key="i">{{i}}</span>
				<el-button @click="isquicktopic=true" type="primary" icon="plus" class="pull-right">新建专题</el-button>
			</div>
			<b></b>
			<div class="lineread">
				<div class="pull-left">
					阅读模式:
					<span v-for="(item,index) in Readin" :key="item"
					@click="ReadinModul(item,index)" :class="{active:Readin_chose==index}">{{item}}</span>

				</div>
				<div class="pull-right">
					字体设置:
					<span v-for="(item,index) in font_size"  :key="item"
					@click="sizeModul(item,index)" :class="{active:size==index}">{{item}}</span>
				</div>
			</div>
			<div class="content" v-html="lineheight()" ref="content" >
			</div>
		</div>
		<div class="keyword" v-if="simListLimit!=''&&simList.length>n">
			<div class="resemble">
				<h2>相似文章<span>({{getLength}})</span></h2>
				<div class="resemble-content"  v-for = "(item,index) in simListLimit" :key="item">
					<div class="title">
						<img src="./img/default.png" alt="#">
						<div class="right">
							<span>{{item.webSite}}</span>
							<div class="time">{{item.addTime | formatTime}}</div>
						</div>
					</div>
					<span class="title-1" @click="queryarticle(item)">{{item.title|filterTitle}} </span>
					<div class="resemble-container"  >
						{{item.content | filterContent}}
					</div>
					<i class='el-icon-close' @click="deleteOne(item)"></i>
				</div>
			</div>
		</div>
		<div class="quicktopic" v-show="isquicktopic" @click="isquicktopic=false">
			<div class="wrapper" @click="e=>e.stopPropagation()">
				<div class="title">新建专题</div>
				<el-form ref="form" :model="form" class="buildTopic"  label-width="100px" label-position="left">
					<el-form-item label="专题名称:"
							prop="topicName"
						   :rules="[{ required: true, message: '专题名称不能为空', trigger: 'blur' },
							 { min: 0, max: 10, message: '长度在 10 个字符内', trigger: 'blur' }]"
					>
					    <el-input v-model="form.topicName" placeholder="请输入专题名称"></el-input>
					 </el-form-item>
					<el-form-item class="time" label="专题时间:"
							prop="timerange"
						   :rules="{ type: 'array',required: true, message: '专题时间不能为空', trigger: 'change' }">
						<el-date-picker
							  style="width:100%"
						      v-model="form.timerange"
						      type="datetimerange"
						      placeholder="专题开始结束时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="地点关键词:"
							prop="distKeyword"
						   :rules="{ required: true, message: '地点关键词不能为空', trigger: 'blur' }">
					    <el-input v-model="form.distKeyword" placeholder="请输入地点关键词"></el-input>
					 </el-form-item>
					 <el-form-item label="人物关键词:">
					    <el-input v-model="form.nameKeyword" placeholder="请输入人物关键词"></el-input>
					 </el-form-item>
					 <el-form-item label="时间关键词:">
					    <el-input  v-model="form.eventKeyword" placeholder="请输入时间关键词"></el-input>
					 </el-form-item>
					 <el-form-item label="排除关键词:">
					    <el-input v-model="form.excludeKeyword" placeholder="请输入排除关键词"></el-input>
					 </el-form-item>
					 <el-form-item class="success">
					    <el-button type="primary" @click="submitForm('form')">保  存</el-button>
					    <el-button @click="isquicktopic=false">取  消</el-button>
					  </el-form-item>
				</el-form>
				<i @click="isquicktopic=false" class='el-icon-close'></i>
			</div>
		</div>
	</div>
</template>
<script>
let Readin=['白天','夜间','护眼']
let font_size=['小','中','大']
let n
import moment from 'moment'
import TendLabel from 'components/common/TendLabel'
import Clipboard from 'clipboard'
	export default{
		name:'details',
		components: {TendLabel},
		data(){
			return{
				n:1,
				article:[],
				similitude:true,
				Readin,
				Readin_chose:0,
				isprotect:false,
				isnight:false,
				font_size,
				ismiddle:false,
				islarge:false,
				size:0,
				isfrom:false,
				isquicktopic:false,
				key:[],
				readms:0,
				form:{
					topicName:'',
					timerange:[],
					distKeyword:'',
					nameKeyword:'',
					eventKeyword:'',
					excludeKeyword:''
				},
				wcount:0,
				copys:true,
				simList:[]
			}
		},
		mounted(){
			this.$store.commit('user/login');
			this.queryMseage()
			if(localStorage.time=='day'){
				this.isnight =false
				this.isprotect =false
				this.Readin_chose = 0
			}else if(localStorage.time=='night'){
				this.isnight =true
				this.isprotect =false
				this.Readin_chose = 1
			}else if(localStorage.time=='eye'){
				this.isnight =false
				this.isprotect =true
				this.Readin_chose = 2
			}
			if(localStorage.size=='s'){
				this.ismiddle=false
				this.islarge=false
				this.size = 0
			}else if(localStorage.size=='m'){
				this.ismiddle=true
				this.islarge=false
				this.size = 1
			}else if(localStorage.size=='l'){
				this.ismiddle=false
				this.islarge=true
				this.size = 2
			}
		},
		computed:{
			simListLimit:function(){
				return this.simList.slice(0,this.wcount);
			},
			getLength(){
				return this.simList.length
			},
		},
		filters:{
			formatTime(value){
				let day = moment(parseInt(value));
				return moment(day).format('YYYY-MM-DD HH:mm:ss')
			},
			filterTitle(value){
				let str = value.substring(0,15)
				str+='...'
				return str
			},
			filterContent(value){
				let str = value
				let newstr = str.replace(/<br \/>/g,'').replace(/(^\s+)|(\s+$)/g,"").replace(/<vrv-img\/>/g,'').substring(0,55)
				newstr+="..."
				return newstr
			},
			filterArcTitle(value){
				if (!value) return ''
				let str = value.substring(0,20)
				str+='...'
				return str
			}
		},
		methods:{
			openUrl(value){
				window.open(value)
			},
			lineheight(){
				let newhtml =''
				var input=this.article.content;
				var keys=this.key;
				var prepareKeys=function(){
					if(!prepareKeys.$map){
						var map={};
						var maxLength=0;
						for(var i=0;i<keys.length;i++){
							map[keys[i]]=1;
							maxLength=Math.max(keys[i].length,maxLength);
						}
						prepareKeys.$map={
							map:map,
							length:maxLength
						}
					}
					return prepareKeys.$map;
				}
				var colorKeyword=function(str){
					var info=prepareKeys();
					var output=[];
					while(str){
						var sub=str.substring(0,info.length);
						str=str.substring(info.length);
						while(!info.map[sub]&&sub){
							str=sub.charAt(sub.length-1)+str;
							sub=sub.slice(0,-1);
						}
						if(sub){
							output.push('<b style="color:#e85a47;font-weight:normal">',sub,'</b>');
						}else{
							output.push(str.charAt(0));
							str=str.substring(1);
						}
					}
					newhtml = output.join('')
				}
				colorKeyword(input);
				return newhtml
			},
			deleteOne(item){
				this.n = 0
				let index = this.simList.indexOf(item)
				this.simList.splice(index,1)
				if(this.simListLimit==''){
					this.similitude = false
				}
			},
			ReadinModul(item,index){
				this.Readin_chose = index
				if (item=='白天') {
					this.isnight =false
					this.isprotect =false
					localStorage.time = 'day'
				}else if(item=='夜间'){
					this.isnight =true
					this.isprotect =false
					localStorage.time = 'night'
				}else if(item=='护眼'){
					this.isnight =false
					this.isprotect =true
					localStorage.time = 'eye'
				}
			},
			sizeModul(item,index){
				this.size = index
				if (item=='小') {
					this.ismiddle=false
					this.islarge=false
					localStorage.size = 's'
				}else if(item=='中'){
					this.ismiddle=true
					this.islarge=false
					localStorage.size = 'm'
				}else if(item=='大'){
					this.ismiddle=false
					this.islarge=true
					localStorage.size = 'l'
				}
			},
			copy(item){
				var clipboard = new Clipboard('.copy');
				this.$message.success('复制成功')
			},
			queryarticle(item){
				let str = localStorage.obj;
				let obj = JSON.parse(str);
				let pirnt = ''
				this.$store.dispatch('queryarticle',{
					id:item.id,
					keywords:obj.keywords
				});
		  },
			queryMseage(){
				let str = localStorage.obj;
				let obj = JSON.parse(str);
				this.$http.post('vrv-monitor-platform-web/data/queryById',{
					id:obj.id,
					timeout:5000,
					keywords:obj.keywords||'',
					titleContentPrint:obj.titleContentPrint||'',
					module_id:localStorage.module_id=='undefined'?'':localStorage.module_id
				}).then(res=>{
					if(res.body.success==true){
					this.article = res.body.data
					this.key = res.body.keywords
					if(this.key.length > 1)
						this.key = this.key.filter((d,j) => j < 6)
					if (typeof(res.body.simList != 'undefined')) {
						this.simList = res.body.simList
					};
					this.$nextTick(function(){
						let w = this.$refs.content.clientHeight
						this.wcount = Math.ceil((w-73-216)/216)+2
					})
					} 
				})
			},
			submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.quickCreateTopic()
          } else {
            return false;
          }
        });
			},
			// 快速建专题
			quickCreateTopic(){
				let time1 = moment(this.form.timerange[0]).format('YYYY-MM-DD HH:mm:ss')
				let time2 = moment(this.form.timerange[1]).format('YYYY-MM-DD HH:mm:ss')
				this.$http.post('vrv-monitor-platform-web/topic/add',{
					home:0,
					topicName:this.form.topicName.trim(),
					monitorStartTime:time1,
					monitorEndTime:time2,
					scope:0,
					carrier:-1,
					distKeyword:this.form.distKeyword.trim(),
					nameKeyword:this.form.nameKeyword.trim(),
					eventKeyword:this.form.eventKeyword.trim(),
					excludeKeyword:this.form.excludeKeyword.trim()
				}).then(res=>{
					if (res.body.success==true) {
						this.$message("新建专题成功")
						this.isquicktopic = false
					};
				})
			},
			// 返回
			goback(){
				window.close()
			}
		}
		
	}
</script>
<style scoped>
	*{
		transition:all 0.35s;
	}
	.url{
		display: inline-block;
		width: 50%;
		padding: 0 0.3rem;
		border:0;
		color:#37a7e0;
		outline:none;
		cursor: pointer;
	}
	input.url:disabled{
		background: #fff;
	}
	.lineHeight{
		color: #e85a47;
		font-weight: normal;
	}
	.details{
		padding-left: 3.12rem;
		background: #fff;
		min-height: 100%;
		display: flex;
		-webkit-font-smoothing:antialiased;
		transition:all 0.35s;
		margin-right: 1.8rem;
	}
	.details .tend{
		display: inline-block;
		vertical-align: top;
	}
	.back{
		width: 5rem;
		height: 2.2rem;
		padding: 0;
		line-height: 2.2rem;
		float: right;
	}
	.easay{
		padding-right: 3.12rem;
		flex:1;
	}
	.details h1{
		font-size: 1.5rem;
		padding: 0;
		margin:0;
		margin-top: 2.8rem;
		text-align: left;
	}
	.from{
		display: flex;
		margin-top: 2.5rem;
		justify-content:flex-start;
	}
	.from div{
		flex:1;
		justify-content:flex-start;
		font-size: 0.88rem;
		text-align: left;
	}
	.from div span{
		display: inline-block;
		margin-right: 0.625rem;
		color: #cacaca;
	}
	.originalText{
		margin-top: 1.56rem;
		font-size: 0.88rem;
	}
	.originalText span{
		display: inline-block;
		margin-right: 0.625rem;
		color: #cacaca;
	}
	.content {
		padding-bottom: 2rem;
		text-indent: 1.75rem;
		font-size: 0.88rem;
		color: #333333;
		line-height: 1.56rem;
		word-break: break-all;
	}
	.content .imgs{
		margin: 0.93rem 0;
	}
	.content .imgs img{
		width: 25rem;
		height: 15.6rem;
		margin-right: 0.93rem;
	}
	.keyword{
		width: 23.75rem;
		flex:0 0 23.75rem;
		border-left: 1px solid #dcdcdc;
	}
	.keyword .new-built{
		height: 6.25rem;
		border-bottom: 1px solid #dcdcdc;
		text-align: center;
		line-height: 6.25rem;
	}
	.design {
		padding: 0 1.75rem;
	}
	.design h2{
		font-size: 1rem;
		margin-bottom: 1.56rem;

	}
	.design-content{
		display: flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.design-content .item{
		height: 2.8rem;
		width: 7.8rem;
		border-radius: 3.125rem;
		text-align: center;
		color: #fff;
		font-size: 0.88rem;
		background: #e85a47;
		line-height: 2.8rem;
		margin-bottom: 1.25rem;
	}
	.read-content{
		display: flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.read-content .item{
		height: 2.8rem;
		width: 5.6rem;
		text-align: center;
		line-height: 2.8rem;
		margin-bottom: 1.375rem;
		cursor: pointer;
	}
	.read-content .item.active{
		border-radius: 3px;
		background: #37a7e0;
		color: #fff;
	}
	.linedesign{
		margin-top: 0.75rem;
		height: 3.125rem;
		border-top: 1px solid #dcdcdc;
		line-height: 3.125rem;
		/*padding-top: 1.56rem;*/
		box-sizing:border-box;
	}
	.linedesign span{
		display: inline-block;
		color: #e85a47;
		padding: 0 1.25rem;
		font-size: 0.88rem;
	}
	.linedesign span:first-child{
		font-size: 0.88rem;
		color: #cacaca;
		padding: 0;
	}
	.linedesign button{
		 transform: translateY(5px);
	}
	.lineread{
		border-top: 1px solid #dcdcdc;
		padding-top: 0.94rem;
		color:#cacaca;
		overflow: hidden;
	}
	.lineread span{
		display: inline-block;
		height: 2.2rem;
		width: 5rem;
		text-align: center;
		line-height: 2.2rem;
		margin-bottom: 1.375rem;
		font-size: 0.88rem;
		color: #626262;
		cursor: pointer;
		margin-right: 2vw;
	}
	.lineread span.active{
		border-radius: 3px;
		background: #37a7e0;
		color: #fff;
	}
	.lineread div span:first-child{
		margin-left: 0.93rem;
	}
	.resemble h2{
		padding-left: 1.87rem;
		cursor: pointer;
		margin-top: 2.8rem;
		line-height: 2.1rem;
		font-size: 1rem;
		margin-bottom: 0;
	}
	.resemble-content{
		position: relative;
		height: 14.56rem;
		padding: 1.56rem 1.875rem 1.875rem 1.5rem;
		box-sizing:border-box;
		border-bottom: 1px solid #dcdcdc;
		
	}
	.resemble-content .title {
		font-size: 0;
		cursor: pointer;

	}
	.resemble-content .title img{
		display: inline-block;
		width: 4.3rem;
		height: 4.3rem;
		border-radius: 50%;
	}
	.resemble-content .title span{
		display: inline-block;
		font-size: 0.88rem;
		color: #666;
		vertical-align: top;
	
	}
	.resemble-content .title-1{
		display: block;
		margin-top: 0.75rem;
		cursor: pointer;
		font-weight: bold;
		font-size: 0.88rem;
		white-space:nowrap;  
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.resemble-content  .resemble-container{
		line-height: 1.25rem;
		height: 3.75rem;
		font-size: 0.88rem;
		margin-top: 0.625rem;
		overflow: hidden;
		text-overflow:ellipsis;
		cursor: pointer;
		transition:all 0.65s;
		color: #666;
	}
	.padding-0{
		padding: 0;
	}
	.resemble{
		position: relative;
		overflow: hidden;
	}
	.resemble .time{
    	font-size: 0.75rem;
    	color: #666;
	}
	.resemble .right{
		float: right;
		width: calc(100% - 4.5rem);
		margin-top: 1.1rem;

	}
	.resemble i{
		cursor: pointer;
		position: absolute;
		right: 0.625rem;
		top: 0.625rem;
		color: #d9d9d9;
		font-size: 1rem;
	}
	.quicktopic label{
		color: #7d7d7d;
	}
	.success button{
		width: 5rem;
	}
	.success button:first-child{
		margin-right: 1.2rem;
	}
	/*夜间*/
	.night{
		background: #202228;
		color: #70789e;
	}
	.night .url{
		background: #202228;
		color: #70789e;
	}
	.night .lineread span.active{
		background: #203f77;
	}
	.night button{
		background: #203f77;
		color: #fff;
		border: none;
	}
	.night .content{
		color: #6e6d6d;
	}
	.night .resemble-container{
		color: #6e6d6d;
	}
	.protect{
		background: #c4d9ba;
		color: #2e6b10
	}
	.protect .url{
		background: #c4d9ba;
    color: #2e6b10;
	}
	.protect .from div span,.protect .originalText span,.protect .lineread,.protect .linedesign span:first-child{
		color: #2e6b10
	}
	.middle{
		font-size: 1rem;
	}
	.middle .content{
		font-size: 1rem;
	}
	.middle .resemble-container{
		font-size: 1rem;
	}
	.large{
		font-size: 1.125rem;
	}
	.large .content{
		font-size: 1.125rem;
	}
	.large .resemble-container{
		font-size: 1.125rem;
	}
	.quicktopic{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.4);
	}
	.quicktopic .wrapper{
		position: relative;
		background: #fff;
		width: 28.1rem;
		padding: 1.56rem;
		padding-top: 0;
		margin: 0 auto;
		margin-top: 10%;
		border-radius: 4px;
	}
	.quicktopic .wrapper .title{
		height: 3.75rem;
		line-height: 3.75rem;
		border-bottom:1px solid #dcdcdc;
		margin-bottom: 1.25rem;
	}
	.quicktopic .wrapper .el-icon-close{
		position: absolute;
		right: 1rem;
		top: 1rem;
		color: #89a9bc;
		cursor: pointer;
	}
	@media screen and (max-width: 1520px) {
		.appear-time{
			display: none !important
		}
	}
    

</style>